<?php
// index.php - Home Page with WordPress Integration
// Student: [Your Name], ID: [Your Student ID]
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Global Food Market - Taste the World</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- Modern Header -->
    <header class="modern-header">
        <div class="header-top">
            <div class="container">
                <div class="header-contact">
                    <span><i class="fas fa-phone"></i> +1 (555) 123-4567</span>
                    <span><i class="fas fa-envelope"></i> info@globalfoodmarket.com</span>
                </div>
                <div class="header-social">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                </div>
            </div>
        </div>
        
        <nav class="main-nav">
            <div class="container">
                <div class="nav-brand">
                    <h1 class="logo">Global Food Market</h1>
                    <p class="tagline">Taste the World</p>
                </div>
                <ul class="nav-menu">
                    <li><a href="index.php" class="nav-link active">Home</a></li>
                    <li><a href="products.php" class="nav-link">Products</a></li>
                    <li><a href="about.php" class="nav-link">About</a></li>
                    <li><a href="contact.php" class="nav-link">Contact</a></li>
                    <li><a href="admin/login.php" class="nav-link admin-btn">Admin</a></li>
                </ul>
                <div class="nav-actions">
                    <button class="cart-btn">
                        <i class="fas fa-shopping-cart"></i>
                        <span class="cart-count">0</span>
                    </button>
                    <button class="mobile-menu-btn">
                        <i class="fas fa-bars"></i>
                    </button>
                </div>
            </div>
        </nav>
    </header>

    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-content">
            <h1 class="hero-title">Discover Authentic Flavors</h1>
            <p class="hero-subtitle">From around the world to your doorstep</p>
            <a href="products.php" class="hero-btn">Shop Now</a>
        </div>
        <div class="hero-overlay"></div>
    </section>

    <!-- Featured Categories -->
    <section class="categories">
        <div class="container">
            <h2 class="section-title">Our Categories</h2>
            <div class="categories-grid">
                <div class="category-card">
                    <div class="category-icon">
                        <i class="fas fa-wine-bottle"></i>
                    </div>
                    <h3>Sauces & Condiments</h3>
                    <p>Authentic sauces from Asia, Europe, and beyond</p>
                    <a href="products.php?category=sauces" class="category-link">Explore →</a>
                </div>
                <div class="category-card">
                    <div class="category-icon">
                        <i class="fas fa-cookie"></i>
                    </div>
                    <h3>Snacks & Treats</h3>
                    <p>Unique snacks from different cultures</p>
                    <a href="products.php?category=snacks" class="category-link">Explore →</a>
                </div>
                <div class="category-card">
                    <div class="category-icon">
                        <i class="fas fa-mortar-pestle"></i>
                    </div>
                    <h3>Spices & Herbs</h3>
                    <p>Premium quality spices for your kitchen</p>
                    <a href="products.php?category=spices" class="category-link">Explore →</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Featured Products -->
    <section class="featured-products">
        <div class="container">
            <h2 class="section-title">Featured Products</h2>
            <p class="section-subtitle">Best sellers from around the world</p>
            
            <div class="products-grid">
                <!-- Product 1 -->
                <div class="product-card featured">
                    <div class="product-badge">Best Seller</div>
                    <div class="product-image">
                        <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?w=400" alt="Sichuan Chili Oil">
                        <div class="product-actions">
                            <button class="action-btn wishlist"><i class="far fa-heart"></i></button>
                            <button class="action-btn quick-view"><i class="far fa-eye"></i></button>
                        </div>
                    </div>
                    <div class="product-info">
                        <span class="product-category">Sauces</span>
                        <h3 class="product-title">Sichuan Chili Oil</h3>
                        <p class="product-description">Authentic Sichuan style chili oil with rich aroma</p>
                        <div class="product-rating">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star-half-alt"></i>
                            <span class="rating-count">(128)</span>
                        </div>
                        <div class="product-price">
                            <span class="current-price">$14.39</span>
                            <span class="original-price">$15.99</span>
                            <span class="discount">10% OFF</span>
                        </div>
                        <button class="add-to-cart-btn">
                            <i class="fas fa-shopping-cart"></i>
                            Add to Cart
                        </button>
                    </div>
                </div>

                <!-- Product 2 -->
                <div class="product-card">
                    <div class="product-image">
                        <img src="https://images.unsplash.com/photo-1571091718767-18b5b1457add?w=400" alt="Japanese Matcha KitKat">
                        <div class="product-actions">
                            <button class="action-btn wishlist"><i class="far fa-heart"></i></button>
                            <button class="action-btn quick-view"><i class="far fa-eye"></i></button>
                        </div>
                    </div>
                    <div class="product-info">
                        <span class="product-category">Snacks</span>
                        <h3 class="product-title">Japanese Matcha KitKat</h3>
                        <p class="product-description">Premium matcha green tea flavored chocolate</p>
                        <div class="product-rating">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="far fa-star"></i>
                            <span class="rating-count">(89)</span>
                        </div>
                        <div class="product-price">
                            <span class="current-price">$8.50</span>
                        </div>
                        <button class="add-to-cart-btn">
                            <i class="fas fa-shopping-cart"></i>
                            Add to Cart
                        </button>
                    </div>
                </div>

                <!-- Product 3 -->
                <div class="product-card">
                    <div class="product-badge">New</div>
                    <div class="product-image">
                        <img src="https://images.unsplash.com/photo-1586201375761-83865001e31c?w=400" alt="Korean Gochujang">
                        <div class="product-actions">
                            <button class="action-btn wishlist"><i class="far fa-heart"></i></button>
                            <button class="action-btn quick-view"><i class="far fa-eye"></i></button>
                        </div>
                    </div>
                    <div class="product-info">
                        <span class="product-category">Sauces</span>
                        <h3 class="product-title">Korean Gochujang Paste</h3>
                        <p class="product-description">Traditional Korean fermented chili paste</p>
                        <div class="product-rating">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <span class="rating-count">(156)</span>
                        </div>
                        <div class="product-price">
                            <span class="current-price">$10.84</span>
                            <span class="original-price">$12.75</span>
                            <span class="discount">15% OFF</span>
                        </div>
                        <button class="add-to-cart-btn">
                            <i class="fas fa-shopping-cart"></i>
                            Add to Cart
                        </button>
                    </div>
                </div>
            </div>

            <div class="text-center">
                <a href="products.php" class="view-all-btn">View All Products</a>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="features">
        <div class="container">
            <div class="features-grid">
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-shipping-fast"></i>
                    </div>
                    <h3>Free Shipping</h3>
                    <p>Free delivery on orders over $50</p>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3>Quality Guarantee</h3>
                    <p>30-day money back guarantee</p>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-headset"></i>
                    </div>
                    <h3>24/7 Support</h3>
                    <p>Customer support always available</p>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-award"></i>
                    </div>
                    <h3>Authentic Products</h3>
                    <p>Direct from countries of origin</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Newsletter -->
    <section class="newsletter">
        <div class="container">
            <div class="newsletter-content">
                <h2>Stay Updated</h2>
                <p>Subscribe to get special offers and news about new products</p>
                <form class="newsletter-form">
                    <input type="email" placeholder="Enter your email" required>
                    <button type="submit">Subscribe</button>
                </form>
            </div>
        </div>
    </section>

    <!-- Modern Footer -->
    <footer class="modern-footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>Global Food Market</h3>
                    <p>Bringing authentic international flavors to your kitchen since 2024.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-pinterest"></i></a>
                    </div>
                </div>
                <div class="footer-section">
                    <h4>Quick Links</h4>
                    <ul>
                        <li><a href="index.php">Home</a></li>
                        <li><a href="products.php">Products</a></li>
                        <li><a href="about.php">About Us</a></li>
                        <li><a href="contact.php">Contact</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>Categories</h4>
                    <ul>
                        <li><a href="products.php?category=sauces">Sauces</a></li>
                        <li><a href="products.php?category=snacks">Snacks</a></li>
                        <li><a href="products.php?category=spices">Spices</a></li>
                        <li><a href="products.php?category=beverages">Beverages</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>Contact Info</h4>
                    <div class="contact-info">
                        <p><i class="fas fa-map-marker-alt"></i> 123 Food Street, City, Country</p>
                        <p><i class="fas fa-phone"></i> +1 (555) 123-4567</p>
                        <p><i class="fas fa-envelope"></i> info@globalfoodmarket.com</p>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 Global Food Market. All rights reserved. | ICTWEB513 E-Commerce Integration Project</p>
            </div>
        </div>
    </footer>

    <script>
        // Simple JavaScript for interactive elements
        document.addEventListener('DOMContentLoaded', function() {
            // Mobile menu toggle
            const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
            const navMenu = document.querySelector('.nav-menu');
            
            mobileMenuBtn.addEventListener('click', function() {
                navMenu.classList.toggle('active');
            });

            // Add to cart functionality
            const addToCartBtns = document.querySelectorAll('.add-to-cart-btn');
            const cartCount = document.querySelector('.cart-count');
            let count = 0;

            addToCartBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    count++;
                    cartCount.textContent = count;
                    cartCount.classList.add('pulse');
                    
                    // Remove animation class after animation completes
                    setTimeout(() => {
                        cartCount.classList.remove('pulse');
                    }, 500);
                    
                    // Show added message
                    const productTitle = this.closest('.product-card').querySelector('.product-title').textContent;
                    showNotification(`${productTitle} added to cart!`);
                });
            });

            // Wishlist toggle
            const wishlistBtns = document.querySelectorAll('.wishlist');
            wishlistBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    this.classList.toggle('active');
                    this.innerHTML = this.classList.contains('active') ? 
                        '<i class="fas fa-heart"></i>' : 
                        '<i class="far fa-heart"></i>';
                });
            });

            function showNotification(message) {
                const notification = document.createElement('div');
                notification.className = 'notification';
                notification.textContent = message;
                document.body.appendChild(notification);
                
                setTimeout(() => {
                    notification.remove();
                }, 3000);
            }
        });
    </script>
</body>
</html>